Skip to content

Slim Homepage AB test - Slimify all sections#15487

Merged
domlander merged 3 commits intomainfrom
doml/slim-homepage-ab-test-slimify-all
Mar 10, 2026
Merged

Slim Homepage AB test - Slimify all sections#15487
domlander merged 3 commits intomainfrom
doml/slim-homepage-ab-test-slimify-all

Conversation

@domlander
Copy link
Contributor

@domlander domlander commented Mar 5, 2026

What does this change?

  • Reduces the width of all sections to 9 grid columns, not just News, Features and More features.
  • Reduces the font-size down to what it would be at the tablet viewport

Why?

We are now aligned on how we will run the AB test. We will have a control and two variants:

  • One with all the content slimmed down to tablet width, with no extra content in the right-hand side.
  • Same as above but with Most Viewed and Deeply Read in the right-hand columns, as per the plan in the initial PR. These two containers go beside News and Features/Mor features respectively. There is no visual difference between the two variants once the user scrolls past More features.

Screenshots

Features More top stories
Control f-control m-control
Variant 1 f-var1 m-var1
Variant 2 f-var2 m-var2

@domlander domlander self-assigned this Mar 5, 2026
@domlander domlander added run_chromatic Runs chromatic when label is applied fronts + curation feature Departmental tracking: work on a new feature labels Mar 5, 2026
@domlander domlander force-pushed the doml/slim-homepage-ab-test-slimify-all branch from bf90c62 to df6c0a4 Compare March 5, 2026 15:19
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 5, 2026
@github-actions
Copy link

github-actions bot commented Mar 5, 2026

@domlander domlander force-pushed the doml/slim-homepage-ab-test-slimify-all branch from df6c0a4 to dba083f Compare March 5, 2026 16:46
@domlander domlander added the run_chromatic Runs chromatic when label is applied label Mar 5, 2026
@domlander domlander force-pushed the doml/slim-homepage-ab-test-slimify-all branch from dba083f to f1d4c66 Compare March 5, 2026 16:58
@domlander domlander marked this pull request as ready for review March 5, 2026 17:03
@domlander domlander requested a review from a team as a code owner March 5, 2026 17:03
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 5, 2026
@github-actions
Copy link

github-actions bot commented Mar 5, 2026

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@domlander domlander added the run_chromatic Runs chromatic when label is applied label Mar 9, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 9, 2026
@domlander domlander requested a review from abeddow91 March 10, 2026 10:13
Comment on lines +216 to +232
/**
* headline medium 20 on desktop and headline medium 17 on tablet and mobile
*/
export const defaultFontSizes: ResponsiveFontSize = {
desktop: 'xsmall',
tablet: 'xxsmall',
mobile: 'xxsmall',
};

export const CardHeadline = ({
headlineText,
format,
showQuotes,
kickerText,
showPulsingDot,
hasInlineKicker,
/** headline medium 20 on desktop and headline medium 17 on tablet and mobile */
fontSizes = { desktop: 'xsmall', tablet: 'xxsmall', mobile: 'xxsmall' },
fontSizes = defaultFontSizes,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Comment on lines +145 to +150
headlineSizes={{
...headlineSizes,
wide: isInSlimHomepageAbTestVariant
? headlineSizes.tablet
: headlineSizes.desktop,
}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is neat

Comment on lines +20 to +36
/**
* This is temporarily commmented out so that we can review this in a 0% test.
* There is currently a container above News on the UK front, which means the test won't run.
* We will only start this test once News is again the top container, but in the meantime, we
* would like to be able to review this test.
*/
// const isFirstCollectionNews =
// collections[0]?.displayName.toLowerCase() === 'news';
const hasRequiredCollections =
hasRequiredSlimHomepageAbTestCollections(collections);

return (
pageId === 'uk' &&
!hasPageSkin &&
// isFirstCollectionNews &&
hasRequiredCollections
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@domlander domlander merged commit 533159b into main Mar 10, 2026
27 checks passed
@domlander domlander deleted the doml/slim-homepage-ab-test-slimify-all branch March 10, 2026 11:54
@gu-prout
Copy link

gu-prout bot commented Mar 10, 2026

Seen on PROD (merged by @domlander 8 minutes and 56 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature fronts + curation Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants